<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.栅格布局</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
<div class="layui-container">
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9" style="background: #00f7de">
        你的内容 9/12
    </div>
    <div class="layui-col-md3 layui-hide-xs" style="background: #1e9fff">
      你的内容 3/12
    </div>
  </div>

  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background: #00f7de">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background: #1e9fff">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background: #5fb878">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background: #1e9fff">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background: #00f7de">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>

  <br/>
  <div class="layui-row layui-col-space12">
    <div class="layui-col-lg4" >
      <div style="background: #5fb878">
      1/3
      </div>
    </div>
    <div class="layui-col-lg4" >
      <div style="background: #5fb878">
        1/3
      </div>
    </div>
    <div class="layui-col-lg4" >
      <div style="background: #5fb878">
        1/3
      </div>
    </div>
  </div>

  <div class="layui-row">
    <div class="layui-col-md4" style="background: #00f7de">
      4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" style="background: #00f7de">
      偏移4列，从而在最右
    </div>
  </div>
</div>
</body>
</html>